﻿$(function() {
    /**
	 * 报警时长
	 * */
    var line1 = echarts.init(document.getElementById('complexline1'));
    optionline = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        dataZoom: {
            type: 'slider',
            start: 0,
            end: 100,
            labelFormatter: function(value) {
                return value; 
            },
            bottom: 1
        },
        backgroundColor: '#e0e0e0',
        color:['#cc3f44'],
        grid: {
            top: '15%',
            left: '4%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        legend: {
            bottom: '30',
            data: ['报警时长']
        },
        xAxis: {
            type: 'category',
            boundaryGap: [1, 1],
            data: [],
            splitLine: {
                show: false
            }
        },
        yAxis: {
            min: 0,
            type: 'value',
            name: '报警时长(分钟)',
            axisLabel: {
                formatter: '{value}'
            },
            splitLine: {
                show: false
            }
        },
        series: [{
            name: '报警时长',
            type: 'line',
            data: [],
            markPoint: {
                data: [{
                    type: 'max',
                    name: '最大时长'
                },
                {
                    type: 'min',
                    name: '最短时长'
                }]
            }
        }]
    };
    line1.setOption(optionline);

    /**
     * 2.每日累计报警情况
     * */
    var barchart1 = echarts.init(document.getElementById('complexbar1'));
    optionBar1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '10%',
            left: '4%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        dataZoom: {
            type: 'slider',
            start: 0,
            end: 100,
            labelFormatter: function(value) {
                return value; // 返回最终的label内容。
            },
            bottom: 1
        },
        legend: {
            bottom: '30',
            data: []
        },
        backgroundColor: '#e0e0e0',
        color:['#00b19d','#ff6264','#f7aa47','#999933','#003366'],
        xAxis: {
            type: 'category',
            data: [],
            splitLine: {
                show: false
            }
        },
        yAxis: {
            min: 0,
            type: 'value',
            name: '报警情况(分钟)',
            axisLabel: {
                formatter: '{value}'
            },
            splitLine: {
                show: false
            }
        },
        series: []
    };
    barchart1.setOption(optionBar1);

    /**
     * 3.各班次报警情况
     * */
    var piechart2 = echarts.init(document.getElementById('complexpie1'));
    optionpie = {
        tooltip: {
            trigger: 'item',
            formatter: "{b}: {c}分钟 ({d}%)"
        },
        legend: {
            bottom: '30',
            data: []
        },
        backgroundColor: '#e0e0e0',
        color:['#00b19d','#ff6264','#f7aa47','#999933','#003366'],
        series: [{
            type: 'pie',
            radius: '60%',
            center: ['50%', '45%'],
            data: [],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                normal: {
                    formatter: '{b}:{c}分钟'
                }
            }
        }]
    };
    piechart2.setOption(optionpie);

    var lineId = 0;
    var equId = 0;
    var startTime = "";
    var endTime = "";

    /**
     * slider滑动事件
     * */
    $('#ss').slider({
        range: true,
        onComplete: function(value) { //滑块值改变时触发
            startTime = moment(value[0]).format('YYYY-MM-DD');
            endTime = moment(value[1]).format('YYYY-MM-DD');
            getData();
        }
    });

    /**
     * 初始化
     * */
    var vm = new Vue({
        el: '#itemData',
        data: {
            item: []
        }
    });

    var timess = [parseInt(moment().subtract(7, 'days').format("x")), parseInt(moment().format("x"))];
    $('#ss').slider('setValues', timess);
    var arr = $('#ss').slider('getValues');
    var time1 = arr[0];
    var time2 = arr[1];
    startTime = moment(time1).format("YYYY-MM-DD");
    endTime = moment(time2).format("YYYY-MM-DD");
    getData();
    function getData() {
        $.post(basePath + "/single/singleComplex/power.json", {
            "lineId": lineId,
            "equId": equId,
            startTime: startTime,
            endTime: endTime
        },
        function(res) {
            vm.$set('item', res);
            if (res.success) {
                line1.setOption({
                    xAxis: {
                        data: res.days
                    },
                    series: [{
                        data: res.dayOvers
                    }]
                });
                var series = [];
                for (var i = 0; i < res.eachShiftOverList.length; i++) {
                    series.push({
                        name: res.eachShiftOverList[i].name,
                        stack: '总量',
                        type: 'bar',
                        barMaxWidth: 40,
                        data: res.eachShiftOverList[i].value
                    });
                }
                barchart1.setOption({
                    legend: {
                        data: res.shiftNames
                    },
                    xAxis: {
                        data: res.days
                    },
                    series: series
                });
                piechart2.setOption({
                    legend: {
                        data: res.shiftNames
                    },
                    series: [{
                        data: res.totalShiftOverLoad
                    }]
                });
            } else {
                alert(res.msg);
            }
        });
    }

    /**
     * 自定义时间按钮的点击事件
     * */
    $("#defineTime").click(function() {
        var mePanel = $('#defineTimeWin');
        mePanel.dialog('open');
    });

    /**
	  * 切换设备的点击事件
	  * */
    var mePanel = $('#switchEquip');
    $("#linetree").tree({
        onClick: function(node) {
            if (node.url) {
                lineId = node.id;
                var lineGrid = $('#lines_data');
                lineGrid.datagrid('load', {
                    lineId: node.id
                });
                lineGrid.datagrid('getPanel').panel('setTitle', node.text);
            }
        }
    });
    $('#lines_data').datagrid({
        //双击设备时，根据选中设备刷新
        onDblClickRow: function(rowIndex, rowData) {
            lineId = rowData.lineId;
            equId = rowData.id;
            var arr = $('#ss').slider('getValues');
            var time1 = arr[0];
            var time2 = arr[1];
            startTime = moment(time1).format("YYYY-MM-DD");
            endTime = moment(time2).format("YYYY-MM-DD");
            getData();
            mePanel.dialog('close');
        }
    });
    $("#switchEquipOK").click(function() {
        var row = $('#lines_data').datagrid('getSelected');
        if (row) {
            lineId = row.lineId;
            equId = row.id;
            var arr = $('#ss').slider('getValues');
            var time1 = arr[0];
            var time2 = arr[1];
            startTime = moment(time1).format("YYYY-MM-DD");
            endTime = moment(time2).format("YYYY-MM-DD");
            getData();
            $('#switchEquip').dialog('close');
        } else {
            $.messager.alert({
                showSpeed: 100,
                title: '消息提示',
                msg: '请选择一条设备记录!',
                timeout: 3000
            });
        }
    });

});